<template>
	<view class="my-activity page-background">
		<view v-if="list.length>0" class="my-activity-list">
			<xjx-activity-item v-for="(item,index) in list" :key="index" :item="item" @todetail="toDetail" :styleType="1" :arrowShow="true"/>
		</view>
		<xjx-nodata v-else-if="pageLoaded"></xjx-nodata>
		<view v-if="list.length==0&&pageLoaded" class="guide-box flex-box">
			<view @click="toActivityList" class="guide-btn">
				立即报名
			</view>
		</view>
		<view v-if="list.length>0" class="bottom-text">
			<van-loading v-if="!allPagesLoaded" type="spinner" :size="24"/>
			<text v-else>我也是有底线的～</text>
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				list: [],
				pageLoaded: false,
				pageNo: 0,
				defaultPageSize: 20,
				windowHeight: 667,
				allPagesLoaded: false
			};
		},
		onLoad(data) {
			this.getList()
			const _this = this
			uni.getSystemInfo({
				success(res) {
					_this.windowHeight = res.windowHeight
				}
			})
		},
		computed: {
			...mapState(['userInfo','accessToken']),
		},
		// 页面相关事件处理函数--监听用户下拉动作
		async onPullDownRefresh() {
			//调用刷新时将执行的方法
			this.pageNo = 0
			this.allPagesLoaded = false
			await this.getList(true)
			uni.stopPullDownRefresh()
		},
		async onReachBottom() {
			if(!this.pageLoaded||this.allPagesLoaded){
				return false
			}
			this.getList()
		},
		methods:{
			lower(){
				if(!this.allPagesLoaded){
					this.getList()
				}
			},
			async getList(refresh){
				this.pageLoaded = false
				const param = {
					'ACCESS-TOKEN': this.accessToken,
					pageSize: this.defaultPageSize,
					pageNo: this.pageNo+1,
					isPay: 1
				}
				const res = await this.$api.queryActEnterList(param)
				if(res&&res.code==200){
					this.pageLoaded = true
					if(refresh){
						this.list = []
					}
					if(res.data.list){
						this.list.push(...res.data.list)
						this.pageNo++
						if(this.list.length==res.data.count){
							this.allPagesLoaded = true
						}
					}
				}
			},
			// matchStatus(item){
			// 	if(item.actType==2&&item.isRefund=='0'){ // 未发生退款的赛事活动
			// 		return item.eventStatusValue
			// 	}else if(item.actStatus=='1'){
			// 		return item.actStatusValue
			// 	}else if(item.orderStatus=='4'||(item.orderStatus=='6'&&item.isRefund=='1')){
			// 		return item.orderStatusName
			// 	}else{
			// 		return item.actStateStr
			// 	}
			// },
			toDetail(id){
				uni.navigateTo({
					url: `/personalCenter/myActivity/detail/detail?id=${id}`
				})
			},
			toActivityList(){
				uni.switchTab({
					url: '/pages/activity/index/index'
				})
			},
			to(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-activity{
		min-height: 100vh;
		overflow: hidden;
		padding-bottom: 15rpx;
		background-color: #FFF;
		.bottom-text{
			text-align: center;
			line-height: 40px;
			height: 80rpx;
			font-size: 24rpx;
			color: #999;
		}
		.my-activity-list{
			background-color: #FFF;
			padding:0 30rpx;
		}
		.activity-item{
			height: 280rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			.top-row{
				height: 30rpx;
				.left{
					.club-name{
						font-size: 30rpx;
						line-height: 30rpx;
					}
				}
				.right{
					color: #FDB42E;
					font-size: 26rpx;
					line-height: 30rpx;
				}
			}
			.activity-info{
				height: 160rpx;
				margin-top: 30rpx;
				align-items: stretch;
				.left{
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					flex: 0 0 auto;
					background-color: #F2F2F2;
					border-radius: 15rpx;
					image{
						width: 100%;
						height: 100%;
						vertical-align: middle;
						border-radius: 15rpx;
					}
				}
				.right{
					flex: 1 0 auto;
					display: flex;
					flex-flow: column;
					justify-content: space-between;
					.title-price{
						align-items: flex-start;
						.activity-title{
							line-height: 38rpx;
							max-width: 340rpx;
						}
						.activity-price{
							font-size: 24rpx;
							line-height: 38rpx;
							text{
								font-size: 30rpx;
							}
						}
					}
					.venue{
						font-size: 26rpx;
						color: $text-color-grey;
					}
					.tags{
						justify-content: flex-start;
					}
				}
			}
		}
		.guide-box{
			justify-content: center;
			.guide-btn{
				height: 78rpx;
				line-height: 74rpx;
				border: 2rpx solid #2E87FF;
				border-radius: 39rpx;
				color: #2E87FF;
				padding: 0 45rpx;
				display: inline-block;
				margin: 20rpx auto;
			}
		}
	}
</style>
